import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import * as XLSX from 'xlsx';

const ExportButton = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { rowsDatas, queryData } = location.state || {};
    console.log(queryData);
    console.log(rowsDatas);

    // 定义整体容器样式，使用 flex 布局实现垂直排列
    const containerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        minHeight: '100vh',
        // padding: '20px'  // 可以尝试去掉或者调整这个 padding
    };

    // 定义标题样式
    const titleStyle = {
        textAlign: 'center',
        marginBottom: '20px'
    };

    // 定义表格外层容器样式，使其可左右滚动且居中显示
    const tableWrapperStyle = {
        width: '100%',
        overflowX: 'auto',
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: '#f0f0f0' // 添加调试样式，显示滚动条的背景颜色
    };

    // 定义表格样式，去除单元格之间的间距
    const tableStyle = {
        borderCollapse: 'collapse',
        width: 'auto', // 让表格宽度根据内容自动调整
        minWidth: '300px' // 设置最小宽度
    };

    // 定义表头和单元格样式
    const thTdStyle = {
        border: '1px solid #ccc',
        padding: '5px', // 适当减小内边距
        textAlign: 'center',
        whiteSpace: 'nowrap', // 防止文本换行
        overflow: 'hidden', // 隐藏溢出内容
        textOverflow: 'ellipsis', // 溢出显示省略号
        maxWidth: '200px' // 设置最大宽度
    };

    // 定义按钮容器样式，用于将按钮居右
    const buttonContainerStyle = {
        display: 'flex',
        justifyContent: 'flex-end',
        width: '100%',
        marginTop: '10px'
    };

    // 导出数据到 Excel 的函数
    const handleExport = () => {
        if (queryData && queryData.length > 0) {
            // 生成表头
            const header = rowsDatas.map(row => row.comments);

            // 生成表格数据
            const data = queryData.map(row => {
                return rowsDatas.map(data => row[data.columnName] || '');
            });

            // 合并表头和数据
            const wsData = [header, ...data];

            // 创建工作表
            const ws = XLSX.utils.aoa_to_sheet(wsData);

            // 创建工作簿
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // 导出 Excel 文件
            XLSX.writeFile(wb, 'exported_data.xlsx');
        }
    };

    return (
        <div style={containerStyle}>
            <h1 style={titleStyle}>导出数据回显</h1>
            <div style={tableWrapperStyle}>
                {/* 如果 queryData 存在且长度大于 0，则渲染表格 */}
                {queryData && queryData.length > 0 ? (
                    <table style={tableStyle} border="1">
                        <thead>
                            <tr>
                                {/* 使用 rowsDatas 中的 comments 作为表头 */}
                                {rowsDatas.map((row, index) => (
                                    <th style={thTdStyle} key={index}>{row.comments}</th>
                                ))}
                            </tr>
                        </thead>
                        <tbody>
                            {/* 遍历 queryData 数组，为每个元素生成一行表格数据 */}
                            {queryData.map((row, index) => (
                                <tr key={index}>
                                    {/* 根据 rowsDatas 中的 columnName 匹配 queryData 中的键 */}
                                    {rowsDatas.map((data, colIndex) => {
                                        const columnName = data.columnName;
                                        return <td style={thTdStyle} key={colIndex}>{row[columnName] || ''}</td>;
                                    })}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                ) : (
                    // 如果 queryData 为空，显示提示信息
                    <p>暂无数据</p>
                )}
            </div>
            <div style={buttonContainerStyle}>
                {/* 导出按钮 */}
                <button onClick={handleExport}>
                    导出
                </button>
            </div>
        </div>
    );
};

export default ExportButton;